<template>
  <el-card style="margin: 20px; overflow: hidden; height: 660px;">
    <el-form label-width="100px">
      <el-row :gutter="10" style="margin-top: 40px;">
        <el-col :span="12">
          <el-form-item label="维护时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="repairForm.maintenanceTimes"
            ></el-date-picker>
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="12">
              <el-form-item label="维修人姓名">
                <el-input v-model="repairForm.username" placeholder="请输入申请人姓名" />
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="repairForm.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>-->
          </el-row>

          <el-form-item label="维护描述" style="margin-top: 10px;">
            <el-input
                v-model="repairForm.description"
                :autosize="{ minRows: 4, maxRows: 60 }"
                maxlength="50"
                show-word-limit
                type="textarea"
                placeholder="请输入维护描述"
            />
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="12">
              <el-form-item label="维护成本">
                <el-input v-model="repairForm.cost" placeholder="请输入维护成本" />
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">
              <el-form-item label="执行人Id">
                <el-input v-model="repairForm.performedId" placeholder="请输入执行人Id" />
              </el-form-item>
            </el-col>-->
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="10">
<!--            <el-col :span="12">
              <el-form-item label="资产信息Id">
                <el-input v-model="repairForm.assetId" placeholder="请输入资产信息Id" />
              </el-form-item>
            </el-col>-->
<!--            <el-col :span="12">
              <el-form-item label="所属部门">
                <el-input v-model="repairForm.department" placeholder="请输入所属部门" />
              </el-form-item>
            </el-col>-->
          </el-row>
        </el-col>
        <el-col :span="12">

          <el-row :gutter="10">
            <el-col :span="12">

            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-button type="primary" @click="submit"
               style="float: right;
               width: 100px;
               margin-top: 260px;">提交</el-button>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import qs from "qs";
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";

const repairForm = ref({
  username: '', // 示例数据
  // phone: '',
  // department: '',
  // assetId: '',
  maintenanceTimes: [],
  description: '',
  // performedId: '',
  cost: '',
});

// 获取用户信息（示例）
/*function getUser() {
  return {
    id: 102,
    username: '张三',
    phone: '13800138000',
    email: 'zhangsan@example.com',
    department: '计算机科学与技术系',
  };
}*/

let userInfo = getUser();

// 提交表单
const submit = () => {
  if (!repairForm.value.maintenanceTimes[0] || !repairForm.value.maintenanceTimes[1]) {
    errorInfo('请选择维护时间');
    return;
  }
  if (!repairForm.value.description) {
    errorInfo('请输入维护描述');
    return;
  }
  if (!repairForm.value.cost) {
    errorInfo('请输入维护成本');
    return;
  }

  repairForm.value.userId = userInfo.id;
  repairForm.value.username = userInfo.username;
  repairForm.value.phone = userInfo.phone;
  repairForm.value.email = userInfo.email;
  repairForm.value.department = userInfo.department;
  repairForm.value.type = `repair`;
  repairForm.value.startTime = repairForm.value.maintenanceTimes[0];
  repairForm.value.endTime = repairForm.value.maintenanceTimes[1];
  repairForm.value.approver = '假名';

  let data = qs.stringify(repairForm.value);
  axios.post(BASE_URL + '/v1/repair/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!');
          clearAll();
          router.push('/applicationList');
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
      .catch((error) => {
        ElMessage({
          message: '提交失败，请稍后再试',
          type: 'error',
          showClose: true,
          center: true,
        });
      });
};

// 清空表单
const clearAll = () => {
  repairForm.value.username = '';
  // repairForm.value.phone = '';
  // repairForm.value.department = '';
  // repairForm.value.assetId = '';
  repairForm.value.maintenanceTimes = [];
  repairForm.value.description = '';
  // repairForm.value.performedId = '';
  repairForm.value.cost = '';
};

// 提示消息
/*const errorInfo = (msg) => {
  ElMessage({
    message: msg,
    type: 'error',
    showClose: true,
    center: true,
  });
};

const OKInfo = (msg) => {
  ElMessage({
    message: msg,
    type: 'success',
    showClose: true,
    center: true,
  });
};*/
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>